<template>
  <div class="productPage">
    <panel @add="addUser" @search="search"></panel>
    <appointmentList
      :appointmentList="appointmentList"
      class="list"
      @change="change($event);dialogFormVisible = true"
    ></appointmentList>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="Number(page_num)"
      @current-change="handleCurrentChange"
      class="pagination"
    ></el-pagination>
    <productUpdate
      :dialogFormVisible="dialogFormVisible"
      @closeDialog="dialogFormVisible = false"
      :toChangeRow="toChangeRow"
      @refresh="refresh"
    ></productUpdate>
    <productAdd :dialogFormVisible="showAddDialog" @closeDialog="showAddDialog=false"></productAdd>
  </div>
</template>

<script>
import appointmentList from "@/components/product/appointmentList";
import panel from "@/components/product/pdpanel";
import productUpdate from "@/components/product/appointmentUpdate";
import productAdd from "@/components/product/appointmentAdd";

export default {
  name: "appointmentPage",
  data() {
    return {
      appointmentList: [],
      page_now: undefined,
      page_num: undefined,
      total: undefined,
      toChangeIndex: undefined,
      dialogFormVisible: false,
      toChangeRow: null,
      searchVal: "",
      showAddDialog: false
    };
  },
  components: {
    appointmentList,
    panel,
    productUpdate,
    productAdd
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    addUser: function() {
      this.showAddDialog = true;
    },
    search: async function(panel) {
      console.log(panel);

      let data = await this._axios
        .get(
          `/api/productAppointment/search?pageNum=1&showNum=10&itemId=${panel.id}&phone=${panel.phone}&status=${panel.status}&createTime=${panel.day}`
        )
        .then(data => data.data.data);
      console.log(data);
      this.page_now = data.thisPage;
      this.page_num = data.thisShow;
      this.total = data.allNum * data.thisShow;
      this.appointmentList = data.attrList;
    },
    handleCurrentChange: async function(val) {
      let data = await this._axios
        .get(`/api/productAppointment/search?pageNum=${val}&showNum=10`)
        .then(data => data.data.data);
      this.appointmentList = data.attrList;
    },
    change: function(index) {
      console.log(index);
      this.toChangeRow = { ...this.appointmentList[index] };
    },
    refresh: async function() {
      let data = await this._axios
        .get("/api/productAppointment/search?pageNum=1&showNum=10")
        .then(data => data.data.data);
      console.log(data);
      this.page_now = data.thisPage;
      this.page_num = data.thisShow;
      this.total = data.allNum * data.thisShow;
      this.appointmentList = data.attrList;
    }
  },

  mounted: async function() {
    // let data = await this._axios
    //   .get("/api/product/search?pageNum=1&showNum=10")
    //   .then(data => data.data.data);
    // console.log(data);
    // this.page_now = data.thisPage;
    // this.page_num = data.thisShow;
    // this.total = data.allNum * data.thisShow;
    // this.appointmentList = data.attrList;
    this.refresh();
  }
};
</script>

<style lang="scss">
.pagination {
  margin-top: 10px;
}
</style>